<dl class="fui-submenu-body" [class.fui-submenu-body-collapsed]="isCollapsed()">
  <dt>{{menuTitle | translate}}</dt>
  <div class="content">
    <dd *ngFor="let item of items" [fuiDropdownTrigger]="childrenDropdown">
      <a
        (click)="clickItem(item)"
        (mouseenter) ="mouseEnter(item)"
        [class.active]="isActive(item)"
        [class.open]="item.childrenOpen"
      >
        <fui-avatar
          *ngIf="!item.icon && !item.img"
          [text]="getAvatar(item)"
          size="md"
          [hidden]="!isCollapsed()"
        ></fui-avatar>
        <svg *ngIf="item.icon" [fuiIcon]="item.icon" class="item-icon"></svg>
        <img *ngIf="item.img" [src]="item.img" class="item-img">
        <span class="item-name text-ellipsis">{{item.name | translate}}</span>
        <span *ngIf="item.count && !isCollapsed()" class="item-count">{{item.count}}</span>
        <svg *ngIf="item.suffix && !isCollapsed()" class="item-suffix" [fuiIcon]="item.suffix.icon"  [color]="item.suffix.color" [size]="item.suffix.size"></svg>
        <svg *ngIf="showToggle(item)" class="angle-down" fuiIcon="angle-up"></svg>
      </a>
      <div *ngIf="item.children && item.childrenOpen && !isCollapsed()" class="fui-submenu-children">
        <a
          *ngFor="let child of item.children"
          [routerLink]="child.url"
          routerLinkActive="active"
        >
          <svg *ngIf="child.icon" [fuiIcon]="child.icon" class="child-icon"></svg>
          <span class="item-name text-ellipsis">{{child.name | translate}}</span>
        </a>
      </div>

      <fui-dropdown
        #childrenDropdown
        [caret]="false"
        [open]="item.children && item.childrenOpen && isCollapsed()"
        customClass="fui-submenu-dropdown"
        direction="rightTop"
        trigger="hover"
      >
        <fui-dropdown-item
          *ngFor="let child of item.children"
          [routerLink]="child.url"
          routerLinkActive="active"
        >
          <span>{{child.name | translate}}</span>
        </fui-dropdown-item>
      </fui-dropdown>
    </dd>
  </div>
</dl>
